<template>
    <div>
        <cl-crud @load="onLoad">
            <template #slot-filter>
                <el-select
                        size="mini"
                        v-model="selects.os"
                        placeholder="请选择平台"
                        filterable
                        style="margin-left: 10px"
                        @change="
						val => {
							refresh({ os: val });
						}
					"
                >
                    <el-option label="全部" value></el-option>
                    <el-option
                            :label="item.label"
                            :value="item.value"
                            v-for="(item, index) in options.os"
                            :key="index"
                    ></el-option>
                </el-select>
            </template>

            <template #table-column-os="{scope}">
                <el-tag v-if="scope.row.os === 0">苹果</el-tag>
                <el-tag v-else-if="scope.row.os === 1">安卓</el-tag>
                <span v-else>{{ scope.row.name }}</span>
            </template>
            <template #table-column-isLatest="{scope}">
                <el-tag v-if="scope.row.isLatest === 1">是</el-tag>
                <el-tag type="info" v-else>否</el-tag>
            </template>
            <template #table-column-updateTip="{scope}">
                <el-tag v-if="scope.row.updateTip === 1">是</el-tag>
                <el-tag type="info" v-else>否</el-tag>
            </template>
            <template #table-column-permType="{scope}">
                <el-tag v-if="scope.row.permType === 1">是</el-tag>
                <el-tag type="info" v-else>否</el-tag>
            </template>
        </cl-crud>
    </div>
</template>

<script>
	import platform from '@/mixin/platform';
	export default {
		name: 'version-setting',
        data() {
			return {
				crud: null,
                selects: {
					os: 0
                },
				options: {
					os: [
                        {
                        	label: '苹果',
                            value: 0
                        },
                        {
                        	label: '安卓',
							value: 1
                        },
						{
							label: '渠道包',
							value: 2
						}
                    ]
                }
            }
        },
		mixins: [platform],
        methods: {
			onLoad({ ctx, app }) {
				this.crud = app;
				ctx.service(this.$service.systemMenagement.version)
                    .set('table', {
						columns: [
							{
								label: '序号',
								type: 'index',
								align: 'center',
								width: 80
							},
							{
								label: '平台',
								prop: 'os',
								align: 'center'
							},
							{
								label: '版本号',
								prop: 'version',
								align: 'center',
                                emptyText: '无'
							},
							{
								label: '提示更新',
								prop: 'updateTip',
								align: 'center'
							},
							{
								label: '是否最新版',
								prop: 'isLatest',
								align: 'center',
                                minWidth: 120
							},
							{
								label: '更新描述',
								prop: 'updateContent',
								align: 'center',
								emptyText: '无',
                                minWidth: 200
							},
							{
								label: '下载地址',
								prop: 'url',
								align: 'center',
								emptyText: '无',
								minWidth: 200
							},
							{
								label: '渠道名',
								prop: 'name',
								align: 'center',
								emptyText: '无'
							},
							{
								label: '渠道标识',
								prop: 'channel',
								align: 'center',
								emptyText: '无'
							},
							{
								label: '创建者',
								prop: 'creator',
								align: 'center',
								emptyText: '无'
							},
							{
								label: '备注',
								prop: 'remark',
								align: 'center',
								emptyText: '无'
							},
							{
								label: '创建时间',
								prop: 'createTime',
								align: 'center'
							},
							{
								label: '是否开启权限',
								prop: 'permType',
								align: 'center',
                                minWidth: 120
							},
						],
						op: {
							layout: ['edit', 'delete']
						}
                    })
					.set('upsert', {
						props: {
							labelWidth: '100px',
                            width: '600px'
						},
						items: [
							{
								prop: 'os',
								label: '平台',
								span: 12,
								value: 0,
								component: {
									name: 'el-select',
									options: [
										{
											label: '苹果',
											value: 0
										},
										{
											label: '安卓',
											value: 1
										},
										{
											label: '渠道包',
											value: 2
										}
									]
								},
								rules: [
									{
										required: true,
										message: '请选择平台'
									},
									{
										validator: (rules, value, callback) => {
											// if (value === 0) {
											// 	app.setForm('url', 'itms-apps://itunes.apple.com/cn/app/id1514914992?mt=8');
											// } else {
											// 	app.setForm('url', '');
                                            // }
											if (value === 2) {
												app.hiddenItem('name', false);
												app.hiddenItem('channel', false);
												app.hiddenItem('version', true);
												app.hiddenItem('isLatest', true);
												app.hiddenItem('updateTip', true);
												app.hiddenItem('updateContent', true);
												app.hiddenItem('permType', true);
											} else {
												app.hiddenItem('name', true);
												app.hiddenItem('channel', true);
												app.hiddenItem('version', false);
												app.hiddenItem('isLatest', false);
												app.hiddenItem('updateTip', false);
												app.hiddenItem('updateContent', false);
												app.hiddenItem('permType', false);
											}
											callback();
										}
									}
                                ]
							},
							{
								hidden: false,
								label: '版本号',
								prop: 'version',
								span: 24,
								component: {
									name: 'el-input',
									attrs: {
										placeholder: '请输入版本号',
										clearable: true
									}
								},
								rules: {
									required: true,
									message: '请输入版本号'
								}
							},
							{
								hidden: false,
								label: '提示更新',
								prop: 'updateTip',
								value: 0,
								component: {
									name: 'el-radio-group',
									options: [
										{
											label: '否',
											value: 0
										},
										{
											label: '是',
											value: 1
										}
									]
								},
								rules: {
									required: true,
									message: '请选择是否提示更新'
								}
							},
							{
								hidden: false,
								label: '是否最新版',
								prop: 'isLatest',
								value: 0,
								component: {
									name: 'el-radio-group',
									options: [
										{
											label: '否',
											value: 0
										},
										{
											label: '是',
											value: 1
										}
									]
								},
								rules: {
									required: true,
									message: '请选择是否最新版'
								}
							},
							{
								hidden: false,
								label: '更新描述',
								prop: 'updateContent',
								span: 24,
								component: {
									name: 'el-input',
									attrs: {
										placeholder: '请输入更新描述',
                                        type: 'textarea',
										rows: 4,
										clearable: true
									}
								},
								rules: {
									required: true,
									message: '请输入更新描述'
								}
							},
							{
								hidden: true,
								label: '渠道名',
								prop: 'name',
								span: 24,
								component: {
									name: 'el-input',
									attrs: {
										placeholder: '请输入渠道名',
										clearable: true
									}
								},
								rules: {
									required: true,
									message: '请输入渠道名'
								}
							},
							{
								hidden: true,
								label: '渠道标识',
								prop: 'channel',
								span: 24,
								component: {
									name: 'el-input',
									attrs: {
										placeholder: '请输入渠道标识',
										clearable: true
									}
								},
								rules: {
									required: true,
									message: '请输入渠道标识'
								}
							},
							{
								label: '下载地址',
								prop: 'url',
								span: 24,
                                value: 'itms-apps://itunes.apple.com/cn/app/id1514914992?mt=8',
								component: {
									name: 'el-input',
									attrs: {
										placeholder: '请输入下载地址',
                                        clearable: true
									}
								},
								rules: {
									required: true,
									message: '请输入下载地址'
								}
							},
							{
								label: '创建者',
								prop: 'creator',
								span: 24,
								component: {
									name: 'el-input',
									attrs: {
										placeholder: '请输入创建者',
										clearable: true
									}
								},
								rules: {
									required: true,
									message: '请输入创建者'
								}
							},
							{
								label: '备注',
								prop: 'remark',
								span: 24,
								component: {
									name: 'el-input',
									attrs: {
										placeholder: '请输入备注',
										clearable: true
									}
								}
							},
							{
								hidden: false,
								label: '启用权限',
								prop: 'permType',
								value: 0,
								component: {
									name: 'el-radio-group',
									options: [
										{
											label: '否',
											value: 0
										},
										{
											label: '是',
											value: 1
										}
									]
								},
								rules: {
									required: true,
									message: '请选择是否启动权限'
								}
							},
						]
					})
					.on('submit', (isEdit, data, { next }) => {
						if (data.os !== 2) {
							data.name = '嗨返';
						}
						next({
							...data,
						});
					})
					.set('layout', [
						['refresh-btn', 'add-btn', 'slot-filter', 'query', 'flex1', 'search-key'],
						['data-table'],
						['flex1', 'pagination']
					])
                    .done();

				app.refresh({
                    os: 0
                });
			},
			refresh(params) {
				this.crud.refresh(params);
			},
        }
	};
</script>

<style lang="scss" scoped>

</style>